<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{g.title}}</title>
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            line-height: 1.4;
            background-color: #444;
            font-family: "微软雅黑",Arial,Helvetica,sans-serif;
            font-size: 12px;
            color: #333;
        }
        input {
            background: none;
            box-sizing: border-box;
            -webkit-appearance: none;
        }
        button {
            outline: none;
            background: none;
            box-sizing: border-box;
        }
        ::-webkit-scrollbar {
            width: 10px;
            height: 1px;
        }
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
            background: #999;
        }
        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
            border-radius: 10px;
            background: #ededed;
        }
        .hide {
            display: none !important;
        }
        .bt_link {
            text-decoration: none;
            color: #20a53a;
        }
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
						flex-direction: column;
            height: 100%;
        }
        .login {
            position: relative;
            width: 360px;
            height: 270px;
            padding: 70px 40px 50px;
            background-color: #fff;
            border-radius: 4px;
        }
        .login.code {
            height: 345px;
        }
        .entrance {
            position: absolute;
            top: 5px;
            right: 5px;
        }
        .entrance .bg_img {
            width: 60px;
            height: 60px;
            background-image: url('');
            background-size: 120px 120px;
            background-repeat: no-repeat;
            background-position: 0 0;
            cursor: pointer;
        }
        .entrance .bg_img:hover {
            background-position: -60px 0;
        }
        .entrance .bg_img.pc {
            background-position: 0 -60px;
        }
        .entrance .bg_img.pc:hover {
            background-position: -60px -60px;
        }
        .entrance .tips {
            position: absolute;
            top: 15px;
            right: 55px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 220px;
            height: 28px;
            background-color: #dff0d8;
            border-radius: 4px;
            text-align: center;
        }
        .entrance .tips::before {
            content: '';
            position: absolute;
            top: 8px;
            right: -11px;
            width: 0;
            height: 0;
            margin-left: -6px;
            border: 6px solid #dff0d8;
            border-color: transparent transparent transparent #dff0d8;
        }
        .icon {
            width: 16px;
            height: 16px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .icon.scan {
            background-image: url('');
            background-size: 14px;
        }
        .icon.safe {
            background-image: url('');
        }
        .tips .text {
            margin-left: 4px;
            color: #20a53a;
        }
        .account .form_title {
            height: 40px;
            margin-bottom: 25px;
            padding: 0 25px;
            cursor: pointer;
            overflow: hidden;
            text-align: center;
            font-size: 26px;
            color: #444;
        }
        .account .form_item {
            position: relative;
            margin-bottom: 20px;
            padding: 5px 0;
        }
        .account .error_tips {
            position: relative;
            top: -14px;
            color: red;
        }
        .form_input {
            width: 100%;
            height: 42px;
            padding: 5px 10px;
            border: 1px solid #d1d1d1;
            border-radius: 3px;
            box-shadow: 0 3px 5px -4px rgb(0 0 0 / 40%) inset, -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
            z-index: 1;
        }
        .form_input.validform_error {
            border: 1px solid #e53451;
            box-shadow: 0 0 2px #ea5d74;
        }
        .validform_checktip {
            position: absolute;
            top: 14px;
            right: 10px;
            height: 24px;
            padding: 0 6px;
            line-height: 24px;
            overflow: hidden;
            z-index: 1;
            text-align: right;
            font-size: 12px;
        }
        .validform_checktip.validform_wrong {
            background: #e53451;
            border-radius: 3px;
            color: #fff;
        }
        .validform_checktip.validform_right {
            padding: 0 10px;
            background-image: url('');
            background-repeat: no-repeat;
            background-position: right center;
            background-size: 16px;
        }
        .form_item.check_code {
            display: flex;
            align-items: center;
        }
        .form_item.check_code .form_input {
            flex: 1;
            width: auto;
        }
        .form_item.check_code .validform_checktip {
            right: 127px;
        }
        .form_item.check_code .check_img {
            width: 100px;
            height: 40px;
            margin-left: 16px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .login_btn {
            width: 100%;
            height: 44px;
            background: linear-gradient(#20a53a,#189d32);
            border: 1px solid #20a53a;
            border-radius: 3px;
            cursor: pointer;
            text-align: center;
            font-size: 16px;
            color: #fff;
            box-shadow: inset 0 1px 2px #30ad42;
            text-shadow: #00851a 0 -1px 0;
        }
        .login_btn:hover {
            background: linear-gradient(#10952a,#088d22);
            border: 1px solid #10952a;
        }
        .account .forget_pwd {
            position: absolute;
            right: 40px;
            bottom: 20px;
            color: #20a53a;
        }
        .static_cdn {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 40px;
            opacity: .8;
        }
        .static_cdn .cont {
            display: flex;
            margin-left: 40px;
        }
        .static_cdn .name {
            height: 22px;
            padding: 0 5px;
            line-height: 22px;
            border: 1px solid #ddd;
            background-color: #eee;
            color: #777;
            font-size: 12px;
        }
        .static_cdn select {
            height: 24px;
            line-height: 22px;
            margin-left: -1px;
            padding-left: 5px;
            border: 1px solid #ddd;
            color: #777;
            font-size: 12px;
        }
        .scan_code {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .scan_code .scan_title {
            margin-bottom: 20px;
            font-size: 23px;
            color: #444;
        }
        .scan_code .qrcode {
            width: 150px;
            height: 150px;
        }
        .scan_code .scan_tip {
            margin-top: 15px;
            text-align: center;
        }
        .scan_tip .link {
            font-size: 0;
        }
        .scan_tip .link a,
        .scan_tip .link span {
            font-size: 13px;
        }
        .scan_tip .desc {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
        }
        .scan_tip .desc .icon {
            width: 25px;
            height: 25px;
            background-size: 23px;
        }
        .scan_tip .desc .text {
            margin-left: 10px;
            font-size: 18px;
            font-weight: 600;
            color: #555;
        }
        .verification_view {
            padding: 30px 40px;
        }
        .verification_view .v_title {
            height: 40px;
            margin-bottom: 15px;
            overflow: hidden;
            text-align: center;
            font-size: 21px;
            color: #444;
        }
        .verification_view .v_input {
            margin-bottom: 15px;
        }
        .verification_view .v_input input {
            width: 100%;
            height: 40px;
            padding: 4px 10px;
            line-height: 30px;
            outline: none;
            border-radius: 3px;
            box-sizing: border-box;
            border: 1px solid #d1d1d1;
            box-shadow: 0 3px 5px -4px rgb(0 0 0 / 40%) inset, -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
            z-index: 1;
        }
        .verification_view .v_btn button {
            width: 100%;
            height: 40px;
            border-radius: 3px;
            border: 1px solid #20a53a;
            background: linear-gradient(#20a53a,#189d32);
            text-shadow: #00851a 0 -1px 0;
            box-shadow: inset 0 1px 2px #30ad42;
            cursor: pointer;
            text-align: center;
            font-size: 15px;
            color: #fff;
        }
        .verification_view .v_tips {
            margin-top: 18px;
            font-size: 13px;
            color: #777;
        }
        .layui-layer-msg {
            position: fixed;
            min-width: 180px;
            margin: 0;
            padding: 0;
            border-radius: 2px;
            background-color: #fff;
            border: 1px solid #d3d4d3;
            box-shadow: none;
        }
        .layui-layer-msg .layui-layer-content {
            position: relative;
            padding: 20px 20px 20px 55px;
            line-height: 24px;
            word-break: break-all;
            overflow: hidden;
            overflow-x: hidden;
            overflow-y: auto;
            font-size: 14px;
            text-align: left;
        }
        .layui-layer-msg .layui-layer-ico {
            position: absolute;
            top: 16px;
            left: 15px;
            display: inline-block;
            width: 30px;
            height: 30px;
            vertical-align: top;
            background-image: url('');
            background-repeat: no-repeat;
        }
        .layui-layer-msg .layui-layer-ico1 {
            background-position: -30px 0;
        }
        .layui-layer-msg .layui-layer-ico2 {
            background-position: -60px 0;
        }
        .layui-layer-msg .layui-layer-ico16 {
            background-image: url('');
        }
        .layui-layer-shade {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .layui-layer {
            position: fixed;
            border-radius: 2px;
            background-color: #fff;
            box-shadow: 1px 1px 50px rgb(0 0 0 / 30%);
        }
        .layui-layer-content {
            position: relative;
            height: 100%;
            overflow: auto;
        }
        .layui-layer-setwin {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 0;
            line-height: initial;
        }
        .layui-layer-setwin .layui-layer-close {
            position: absolute;
            top: -28px;
            right: -28px;
            display: inline-block;
            vertical-align: top;
            width: 30px;
            height: 30px;
            background-image: url('');
            background-repeat: no-repeat;
            cursor: pointer;
            transition: all .4s ease-in-out;
        }
        .layui-layer-setwin .layui-layer-close:hover {
            background-image: url('');
            transform: rotate(180deg);
        }
				.login-images img {
					height: 85px;
				}
				.login-images {
					width: 440px;
					display: flex;
					margin-bottom:25px;
					justify-content: center;
				}
    </style>
    <script>
        var ie_version = (function() {
            var userAgent = navigator.userAgent,
                isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1,
                isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11,
                isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
            if (isLessIE11) {
                var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
                IEReg.test(userAgent);
                var IEVersionNum = parseFloat(RegExp['$1']);
                if (IEVersionNum === 7) {// IE7
                    return 7;
                } else if (IEVersionNum === 8) {// IE8
                    return 8;
                } else if (IEVersionNum === 9) {// IE9
                    return 9;
                } else if (IEVersionNum === 10) { // IE10
                    return 10;
                } else {
                    return 6;
                }
            } else if (isEdge) { // edge
                return 'edge';
            } else if (isIE11) {// IE11
                return 11;
            } else {// 不是ie浏览器
                return -1;
            }
        }());
        if (ie_version != -1 && ie_version < 9) window.location.href = '/tips'
    </script>
</head>
<body>
    <div class="main">
{#        <div class="login-images"><img src="/static/images/bt_logo_new.png"></div>#}
		<div class="login{% if session['code'] %} code{% endif %}">
            <div class="account">
                <div class="last_token" style="display: block;" data="{{data['last_login_token']}}"></div>
                <form class="login_form" onsubmit="return false;">
                    <div class="form_title">{{g.title}}</div>
                    <div class="form_item">
                        <input type="text" class="form_input" id="username" placeholder="{{data['lan']['N3']}}" />
                        <div class="validform_checktip"></div>
                    </div>
                    <div class="form_item">
                        <input type="password" class="form_input" id="password" placeholder="{{data['lan']['N6']}}" />
                        <div class="validform_checktip"></div>
                    </div>
                    <div class="error_tips"></div>
                    <div class="form_item check_code{% if not session['code'] %} hide{% endif %}">
                        <input type="text" class="form_input" id="code" placeholder="{{data['lan']['N9']}}" />
                        <div class="validform_checktip"></div>
                        <img class="check_img" title="{{data['lan']['N10']}}" src="/code" onClick="this.src = this.src.split('?')[0] + '?' + new Date().getTime()" />
                    </div>
                    <button class="login_btn">{{data['lan']['N11']}}</button>
                    <a class="forget_pwd" href="https://forum.aapanel.com/d/16-how-to-reset-password-for-aapanel-linux-6-x" target="_blank">{{data['lan']['N13']}}</a>
                    {% if data['hosts'] != '[]' %}
                        <div class="static_cdn">
                            <div class="cont">
                                <div class="name">Acceleration node</div>
                                <select id="static_cdn">
                                    <option value="localhost">Counting...</option>
                                </select>
                            </div>
                        </div>
                    {% endif %}
                </form>
            </div>
            <div class="scan_code hide">
                <div class="scan_title">{{data['lan']['QR_CORE_LOGIN']}}</div>
                <div class="qrcode" id="qrcode"></div>
                <div class="scan_tip">
                    <div class="link">
                        <span>{{data['lan']['SCAN_LOGIN']}}</span>
                        <a href="https://www.bt.cn/bbs/thread-47408-1-1.html" target="_blank" class="bt_link">{{data['lan']['BT_SMALL_P']}}</a>
                    </div>
                    <div class="desc">
                        <div class="icon scan"></div>
                        <div class="text">Scan</div>
                    </div>
                </div>
            </div>
            <div class="entrance">
                <div class="bg_img"></div>
                <div class="tips">
                    <div class="icon scan"></div>
                    <div class="text">{{data['lan']['SCAN_MORE_SAFETY']}}</div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/static/js/md5.js"></script>
    <script type="text/javascript" src="/static/js/qrcode.min.js"></script>
    <script>
        // 左右清空空格
        if (typeof (String.prototype.trim) === "undefined") {
            String.prototype.trim = function () {
                return String(this).replace(/^\s+|\s+$/g, '');
            };
        }
        window.onload = function () {
            run();
        }
        /** 
         * 加载完js后运行
         */
        function run () {
            // 请求
            var request = new Request();
            // 时间
            var timer = null;
            // 二维码
            var qrcode = null;
            // 弹框
            var popup = new Popup();
            // 登录框
            var loginBox = document.querySelector('.login');
            // 登录按钮
            var loginBtn = document.querySelector('.login_btn');
            // 用户名input框
            var usernameInput = document.querySelector('#username');
            // 密码input框
            var passwordInput = document.querySelector('#password');
            // 验证码input框
            var codeInput = document.querySelector('#code');
            // 静态cdn选择框框
            var staticCdnSelect = document.querySelector('#static_cdn');
            // 错误提示框
            var errorTipsBox = document.querySelector('.error_tips');
            // 验证码
            var checkCodeBox = document.querySelector('.check_code');
            // 验证码图片
            var checkImg = document.querySelector('.check_img');
            // 切换二维码
            var entrance = document.querySelector('.entrance').querySelector('.bg_img');
            /**
             * 显示验证码
             */
            function show_check_img() {
                checkCodeBox.classList.remove('hide');
                checkImg.click();
            }
            /**
             * 判断是否为空
             */
            function is_empty (val) {
                return val === '' || val === undefined || val === null;
            }
            /**
             * 单独验证
             */
            function dom_validation (dom, tips) {
                var val = dom.value;
                var checktip = dom.parentNode.querySelector('.validform_checktip');
                if (!checktip) return;
                if (is_empty(val)) {
                    dom.classList.add('validform_error');
                    checktip.classList.add('validform_wrong');
                    checktip.classList.remove('validform_right');
                    checktip.innerText = tips;
                } else {
                    dom.classList.remove('validform_error');
                    checktip.classList.remove('validform_wrong');
                    checktip.classList.add('validform_right');
                    checktip.innerText = '';
                }
            }
            /**
             * 表单验证
             */
            function form_validation (callback) {
                var username = usernameInput.value.trim();
                var password = passwordInput.value.trim();
                if (is_empty(username) || is_empty(password)) {
                    popup.msg("{{data.lan.JS1}}");
                }
                if (is_empty(username)) {
                    dom_validation(usernameInput, '{{data.lan.N1}}');
                    usernameInput.focus();
                    return;
                }
                if (is_empty(password)) {
                    dom_validation(passwordInput, '{{data.lan.N4}}');
                    passwordInput.focus();
                    return;
                }
                var code = codeInput.value.trim();
                var isHide = checkCodeBox.classList.contains('hide');
                if (!isHide && is_empty(code)) {
                    popup.msg('Verification code is empty, please try again!');
                    dom_validation(codeInput, '{{data.lan.N7}}');
                    codeInput.focus();
                    return;
                }
                var last_token = document.querySelector(".last_token").attributes.data.value;
                var data = {
                    username: md5(md5(username + last_token)),
                    password: md5(md5(password) + '' + '_bt.cn'),
                    code: code
                };
                if (staticCdnSelect) {
                    var index = staticCdnSelect.selectedIndex;
                    data['cdn_url'] = staticCdnSelect.options[index].value;
                }
                if (callback) callback(data);
            }
            /**
             * 设置每秒请求
             */
            function set_control_time() {
                timer = setInterval(function () {
                    request.post('/public?name=app&fun=is_scan_ok', {}, function (res) {
                        if (res.status) {
                            popup.msg('Scanning code succeeded, waiting...', { time: 0, icon: 1 });
                            clear_control_time();
                            login_admin(res.msg);
                        }
                    });
                }, 2000);
            }
            /**
             * 清除设置请求
             */
            function clear_control_time () {
                if (timer) clearInterval(timer);
            }
            /**
             * 登录
             */
            function login_admin (key) {
                request.post('/public?name=app&fun=set_login', {
                    secret_key: key
                }, function (res) {
                    if (res.status) {
                        popup.msg('Secure login in progress,waiting...', {
                            icon: 16,
                            time: 800,
                            shade: [0.4, '#fff']
                        }, function () {
                            window.location.href = '/';
                        });
                    } else {
                        popup.msg(res.msg, { icon: 2 });
                    }
                });
            }
            /**
             * 生成验证码
             */
            function generate_qrcode() {
                if (qrcode) qrcode.clear();
                request.post('/public?name=app&fun=login_qrcode', {}, function (res) {
                    var text = res.status ? res.msg : 'https://www.bt.cn/download/app.html';
                    if (qrcode) {
                        qrcode.makeCode(text);
                    } else {
                        qrcode = new QRCode('qrcode', {
                            width: 150,
                            height: 150,
                            colorLight: "#fefefe",
                            colorDark: "#333",
                            text: text
                        });
                    }
                });
            }
            // 用户名校验
            usernameInput.onblur = function () {
                dom_validation(this, '{{data.lan.N1}}');
            };
            // 密码校验
            passwordInput.onblur = function () {
                dom_validation(this, '{{data.lan.N4}}');
            };
            // 验证码校验
            codeInput.onblur = function () {
                dom_validation(this, '{{data.lan.N7}}');
            };
            // 登录
            loginBtn.onclick = function () {
                form_validation(function (data) {
                    popup.msg("{{data['lan']['JS2']}}", { time: 0, icon: 16, shade: [0.3, '#333'] });
                    request.post('/login', data, function (res) {
                        popup.remove_msg();
                        if (res == '1') {
                            popup.open({
                                content: '\
                                    <div class="verification_view">\
                                        <div class="v_title">Google authentication</div>\
                                            <div class="v_input">\
                                                <input type="text" class="v_code" placeholder="Verification code" />\
                                            </div>\
                                            <div class="v_btn">\
                                                <button id="auth_verif_btn">Log in</button>\
                                            </div>\
                                            <div class="v_tips">* Please use the Google Authenticator app to get the verification code<br><a class="bt_link" href="https://forum.aapanel.com/d/357-how-to-use-google-authenticator-in-the-aapanel" target="_blank">Unable to verify, Click Help</a>\
                                        </div>\
                                    </div>\
                                ',
                                callback: function () {
                                    var btn = document.querySelector('#auth_verif_btn');
                                    var codeInput = document.querySelector('.v_code');
                                    codeInput.onkeydown = function (e) {
                                        if (e.keyCode == 13) btn.click();
                                    };
                                    btn.onclick = function () {
                                        var code = codeInput.value.trim();
                                        if (code === '') {
                                            popup.msg('Please enter Verification code!');
                                            return;
                                        }
                                        data['vcode'] = code;
                                        popup.msg('{{data.lan.JS2}}', { icon: 16, shade: [0.3, '#333'] });
                                        request.post('/login', data, function (rdata) {
                                            popup.remove_msg();
                                            if (!rdata.status) {
                                                popup.msg(rdata.msg, { icon: 2 });
                                                return false;
                                            }
                                            popup.msg(rdata.msg, {
                                                icon: 16,
                                                time: 800,
                                                shade: [0.3, '#000']
                                            }, function () {
                                                window.location.href = '/';
                                            });
                                        });
                                    };
                                }
                            });
                            return;
                        }
                        var status = res.status;
                        if (!status) {
                            popup.msg(res.msg);
                            codeInput.value = '';
                            passwordInput.value = '';
                            errorTipsBox.innerHTML = res.msg;
                            loginBox.classList.add('code');
                            show_check_img();
                            return;
                        }
                        popup.msg(res.msg, { time: 0, icon: 16, shade: [0.3, '#333'] });
                        window.location.href = '/';
                    });
                });
            };
            // 切换登录方式
            entrance.onclick = function () {
                var tips = this.nextSibling.nextSibling;
                var icon = tips.querySelector('.icon');
                var text = tips.querySelector('.text');
                var scanCode = document.querySelector('.scan_code');
                var account = document.querySelector('.account');
                if (this.classList.contains('pc')) {
                    this.classList.remove('pc');
                    icon.classList.add('scan');
                    icon.classList.remove('safe');
                    text.innerText = '{{data.lan.SCAN_MORE_SAFETY}}';
                    account.classList.remove('hide');
                    scanCode.classList.add('hide');
                    clear_control_time();
                } else {
                    this.classList.add('pc');
                    icon.classList.add('safe');
                    icon.classList.remove('scan');
                    text.innerText = 'Switch account login';
                    account.classList.add('hide');
                    scanCode.classList.remove('hide');
                    generate_qrcode();
                    set_control_time();
                }
            };
            window.onresize = function () {
                popup.set_msg_center();
                popup.set_open_center();
            };
            if ("{{data['app_login']}}" == 'True') {
                entrance.click();
            }
        }
        /**
         * 请求
         */
        function Request () {
            this.xhr = new XMLHttpRequest();
        }
        Request.prototype = {
            post: function (url, data, callback) {
                var option = {
                    method: 'POST',
                    url: url,
                    callback: callback
                };
                var form = new FormData();
                for (var key in data) {
                    if (data[key] !== '' && data[key] !== undefined && data[key] !== null) {
                        form.append(key, data[key]);
                    }
                }
                option.data = form;
                this.http(option);
            },
            http: function (option) {
                var xhr = this.xhr;
                var toUrl = window.location.protocol + '//' + window.location.host + option.url;
                var method = option.method || 'GET';
                // 打开连接
                xhr.open(method, toUrl, true);
                // 发送请求
                if (method == 'GET') {
                    xhr.send();
                } else if (method == 'POST') {
                    xhr.send(option.data);
                }
                // 请求后的回调接口
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var res = xhr.responseText;
                        res = res ? JSON.parse(res) : '';
                        if (option.callback) option.callback(res);
                    }
                }
            }
        };
        /**
         * 弹框
         */
        function Popup() {
            this.zIndex = 200000;
        }
        Popup.prototype = {
            /**
             * 弹框
             */
            open: function (option) {
                var _this = this;
                option = option || {};
                this.set_open_option(option);
                this.add_overlay(option);
                var container = document.createElement('div');
                container.classList.add('layui-layer');
                var content = document.createElement('div');
                content.classList.add('layui-layer-content');
                var setwin = document.createElement('div');
                setwin.classList.add('layui-layer-setwin');
                var close = document.createElement('a');
                close.classList.add('layui-layer-close');
                if (option.area[0]) container.style.width = option.area[0];
                if (option.area[1]) container.style.height = option.area[1];
                content.innerHTML = option.content;
                close.onclick = function () {
                    _this.remove_open();
                };
                container.style['z-index'] = this.zIndex;
                this.zIndex++;
                setwin.appendChild(close);
                container.appendChild(content);
                container.appendChild(setwin);
                document.documentElement.appendChild(container);
                this.set_open_center('layui-layer');
                if (option.callback) option.callback();
            },
            /**
             * 提示框
             */
            msg: function (msg, option, callback) {
                var _this = this;
                option = option || {};
                this.remove_msg();
                this.add_overlay(option);
                this.set_msg_option(option);
                var container = document.createElement('div');
                container.className = 'layui-layer-msg';
                container.style['z-index'] = 200000;
                var box = document.createElement('div');
                box.className = 'layui-layer-content';
                var icon = document.createElement('i');
                icon.className = 'layui-layer-ico layui-layer-ico' + option.icon;
                box.appendChild(icon);
                box.innerHTML += msg;
                container.style['z-index'] = this.zIndex;
                this.zIndex++;
                container.appendChild(box);
                document.documentElement.appendChild(container);
                this.set_msg_center();
                if (option.time !== 0) {
                    setTimeout(function () {
                        _this.remove_msg();
                        if (callback) callback();
                    }, option.time);
                }
            },
            /**
             * 添加遮罩层
             */
            add_overlay: function (option) {
                if (option.hasOwnProperty('shade')) {
                    var shade = option.shade;
                    var overlay = document.createElement('div');
                    overlay.className = 'layui-layer-shade';
                    overlay.style.opacity = shade[0];
                    overlay.style['background-color'] = shade[1];
                    overlay.style['z-index'] = this.zIndex;
                    this.zIndex++;
                    document.documentElement.appendChild(overlay);
                }
            },
            /**
             * 弹框配置项
             */
            set_open_option: function (option) {
                var defaultOption = {
                    area: ['390px', '280px'],
                    shade: [0.3, '#000'],
                    content: ''
                };
                this.set_option(option, defaultOption);
            },
            /**
             * msg配置项
             */
             set_msg_option: function (option) {
                var defaultOption = {
                    icon: 2,
                    time: 2000
                };
                this.set_option(option, defaultOption);
            },
            /**
             * 设置默认配置项
             */
            set_option: function (option, defaultOption) {
                for (var key in defaultOption) {
                    if (option[key] === undefined) {
                        option[key] = defaultOption[key];
                    }
                }
            },
            /**
             * 提示框设置居中
             */
            set_msg_center: function () {
                this.set_center('layui-layer-msg');
            },
            /**
             * 弹框设置居中
             */
            set_open_center: function () {
                this.set_center('layui-layer');
            },
            /**
             * 设置居中
             */
            set_open_center: function () {
                this.set_center('layui-layer');
            },
            /**
             * 居中
             */
            set_center: function (_class) {
                var dom = document.querySelector('.' + _class);
                if (!dom) return;
                var bodyWidth = document.documentElement.clientWidth;
                var bodyHeight = document.documentElement.clientHeight;
                var domWidth = dom.clientWidth;
                var domHeight = dom.clientHeight;
                dom.style.left = ((bodyWidth - domWidth) / 2) + 'px';
                dom.style.top = ((bodyHeight - domHeight) / 2) + 'px';
            },
            /**
             * 删除提示框
             */
            remove_msg: function () {
                this.remove('layui-layer-msg');
            },
            /**
             * 删除弹框
             */
            remove_open: function () {
                this.remove('layui-layer');
            },
            /**
             * 删除
             */
            remove: function (_class) {
                var dom = document.querySelector('.' + _class);
                if (!dom) return;
                var overlay = dom.previousElementSibling;
                if (overlay.classList.contains('layui-layer-shade')) {
                    document.documentElement.removeChild(overlay);
                    this.zIndex--;
                }
                document.documentElement.removeChild(dom);
                this.zIndex--;
            }
        }
    </script>
</body>
</html>